var OrderRetreatDetail = function () {
  var template = /* html */ `
    <div class="order-retreat-detail" style="padding: 0 20px;padding-bottom: 10px;" v-loading.fullscreen.lock="loading">
      <div class="detailTable">
        <el-table fit stripe border :data="detailList" style="width: 100%">
          <el-table-column :resizable="false" prop="companyOrderId" label="订单编号" :auto-width="true" min-width="80px" header-align="center"></el-table-column>
          <el-table-column :resizable="false" prop="factoryId" label="工厂型号" :auto-width="true" min-width="80px" header-align="center"></el-table-column>
          <el-table-column :resizable="false" prop="coustomId" label="客户型号" :auto-width="true" min-width="80px" header-align="center"></el-table-column>
          <el-table-column :resizable="false" prop="coustomOrderId" label="客户订单号" :auto-width="true" min-width="90px" header-align="center"></el-table-column>
          <el-table-column :resizable="false" prop="supplierName" label="供应商" :auto-width="true" min-width="70px" header-align="center"></el-table-column>
          <el-table-column :resizable="false" prop="technology" label="加工工艺" :auto-width="true" min-width="80px" header-align="center"></el-table-column>
          <el-table-column :resizable="false" prop="flowCycle" label="流程周期" min-width="80px" align="center"></el-table-column>
          <el-table-column :resizable="false" prop="maching" label="加工对象" :auto-width="true" min-width="70px" header-align="center">
            <template slot-scope="props">
              <span v-if="!props.row.hasEleOrder">{{props.row.maching}}</span>
              <el-popover v-else title="电镀详情" trigger="hover" placement="right-start">
                <div slot="reference">
                  {{props.row.maching}}(电镀)
                </div>
                <electroplate-detail :order="props.row"></electroplate-detail>
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column :resizable="false" prop="color" label="颜色" :auto-width="true" min-width="60px" header-align="center"></el-table-column>
          <el-table-column :resizable="false" prop="count" label="返回数量" min-width="80px" align="center"></el-table-column>
          <el-table-column :resizable="false" prop="remark" label="备注" width="151px" show-overflow-tooltip header-align="center">
          </el-table-column>
          <el-table-column :resizable="false" prop="isFinish" label="是否完成" min-width="80px" align="center">
            <template slot-scope="props">
              <span>{{props.row.isFinish===1?'完成':'未完成'}}</span>
            </template>
          </el-table-column>
          <el-table-column :resizable="false" label="返回类型" min-width="80px" align="center">
            <template slot-scope="props">
              <span>{{inOutTypeObj[props.row.inOutType]}}</span>
            </template>
          </el-table-column>
          <el-table-column :resizable="false" prop="returnCount" label="外协数量(付)" min-width="100px" align="center"></el-table-column>
          <el-table-column :resizable="false" prop="valuationCount" label="外协计价数量" min-width="100px" align="center">
            <template slot-scope="props">
              <span>{{props.row.valuationCount}} {{props.row.valuationUint}}</span>
            </template>
          </el-table-column>
          <el-table-column :resizable="false" label="返回时间" width="100px" align="center">
            <template slot-scope="props">
              <span v-if="props.row.returenTime!==''">{{moment(props.row.returenTime).format('YYYY-MM-DD')}}</span>
            </template>
          </el-table-column>
          <el-table-column :resizable="false" prop="returnUser" label="返回制单人" :auto-width="true" min-width="90px" header-align="center"></el-table-column>
          <el-table-column :resizable="false" label="状态" min-width="100px" align="center">
            <template slot-scope="props">
              <span>{{statusObj[props.row]}}</span>
            </template>
          </el-table-column>
          <el-table-column :resizable="false" label="可审核人" min-width="100px;" :auto-width="true" header-align="center">
            <template slot-scope="scope">
              <span v-for="name in scope.row.approvalNameList" :key="name">{{name}}</span>
            </template>
		      </el-table-column>
          <el-table-column :resizable="false" prop="approvalUser" label="返回审核人" :auto-width="true" min-width="90px" header-align="center"></el-table-column>
          <el-table-column :resizable="false" label="返回审核时间" min-width="110px" align="center">
            <template slot-scope="props">
              <span v-if="props.row.approvalTime!==''">{{moment(props.row.approvalTime).format('YYYY-MM-DD')}}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  `;

  return {
    props: {
      order: {
        type: Object,
        required: true
      }
    },

    data: function () {
      return {
        loading: false,
        detailList: [],
        materialMachingMap: {},
        moment: moment,
        inOutTypeObj: {
          "1": "外协返回",
          "2": "外协退回"
        },
        statusObj: {
          "0": "未审核",
          "1": "已审核",
          "2": "退回"
        }
      };
    },

    created: function () {
      this.loading = true;
      var self = this;
      this.setMaterialMachingMap().then(function () {
        self.setDetailList().then(function () {
          self.loading = false;
        });
      });
    },

    methods: {
      setMaterialMachingMap: function () {
        var self = this;
        return ModuleUtil.getMaterialMachingMap().then(function (materialMachingMap) {
          self.materialMachingMap = materialMachingMap;
          return materialMachingMap;
        }).catch(function () {
          return {};
        });
      },

      setDetailList: function () {
        var order = this.order;
        var self = this;
        return ajaxRequest('putOutNew/getPutOutReturnAndBackDetail', {
          typeId: order.typeId
        }).then(function (detailList) {
          var orderGroup = _.groupBy(detailList, 'typeId');
          var orders = [];
          var materialMachingMap = self.materialMachingMap;
          for (var typeId in orderGroup) {
            var orderGroupList = orderGroup[typeId];
            var order = orderGroupList[0];
            order = _.cloneDeep(order);
            var type = order.type;
            if (type !== 0) {
              var maching;
              if (type === -1) {
                maching = '整架';
              } else {
                maching = materialMachingMap[type];
              }
              order.maching = maching;
              var color = ModuleUtil.getOutOrderFrameColor(orderGroupList);
              order.color = color;
            }

            var hasEleOrder = order.additionalMaterialType !== '';
            if (hasEleOrder) {
              for (var i = 0; i < orderGroupList.length; i++) {
                var obj = orderGroupList[i];
                obj.additionalColor = obj.color;
              }
            }
            order.mergeOrders = orderGroupList;
            order.hasEleOrder = hasEleOrder;

            orders.push(order);
          }
          for (var i = 0; i < orders.length; i++) {
            var order = orders[i];
            var returenTime = order.returenTime;
            order.returenTime = moment(returenTime).valueOf();
            order.approvalTime = SysUtil.formatString2Date(order.approvalTime);

            if (order.valuationUint === null) {
              order.valuationUint = order.returnCount;
            }
          }
          self.detailList = orders;
          return orders;
        }).catch(function () {
          return [];
        });
      }
    },

    components: {
      ElectroplateDetail: ElectroplateDetail
    },

    template: template
  };
}();